<template>
	<div class="store_info_card" v-if="storeList && storeList.length > 0">
		<div class="store_info_content">
			<div class="store_name" @click="popupShow = true">
				<van-icon size="16" class="store_icon" name="shop-o" color="#000000" />
				<span>{{storeInfo.name}}</span>
				<!-- <span v-else>无门店信息，请选择</span> -->
				<van-icon size="14" class="store_icon" name="arrow" color="#333333" />
			</div>
			<div class="store_distance" v-if="isLocation && storeInfo.distance">距离您{{storeInfo.distance}}km</div>
			<div class="store_distance" v-else>未获取您的定位，<span class="store_auth" @click="openSetting">去授权</span></div>
		</div>
		<!-- 弹出层 -->
		<van-popup :show="popupShow" position="bottom" custom-style="height: 50vh;" z-index="1024" round
			class="popup_card" @close="popupShow = false">
			<div class="popup_head">
				<span>门店列表</span>
				<span class="popup_head_close" @click="popupShow = false">取消</span>
			</div>
			<div class="store_list">
				<scroll-view scroll-y style="height:calc(50vh - 100rpx);">
					<div v-for="(item,index) in storeList" :key="index" class="store_item"
						@click="$router.push({ path: '/pages/shopDetail/index/index',query:item})">
						<div class="store_item_left">
							<div class="store_item_title">{{item.name}}<span v-if="item.isDefault == '1'">(总店)</span>
							</div>
							<div>
								<van-icon class="store_icon" name="location-o" />{{item.detailedAddress}}
							</div>
							<div>
								<van-icon class="store_icon" name="phone-o" />{{item.phone}}
							</div>
						</div>
						<div class="store_item_right">
							<div style="color:#719afa;">查看详情</div>
							<div v-if="isLocation">距离{{item.distance}}km</div>
						</div>
					</div>
				</scroll-view>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import {
		getShopList2
	} from "@/api/eye";
	export default {
		props: {
			config: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				isLocation: false,
				popupShow: false,
				selectIndex: 0,
				storeInfo: {}, //默认门店信息
				storeList: [], //门店列表
			};
		},
		mounted() {
			this.getShopList();
			this.getLocation();
		},
		computed: {},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				});
			},
			// 门店选择
			selectStore(val, index) {
				this.selectIndex = index;
				this.storeInfo = val;
				this.popupShow = false;
				console.log(val,index,"---------这是什么啊")
			},
			/* 获取门店列表 */
			getShopList() {
				getShopList2().then(res => {
					this.storeList = res.data
					this.storeInfo = this.storeList[0] || {};
					this.selectIndex = 0;
				})
			},
			/* 获取用户位置信息 */
			getLocation() {
				let that = this;
				// if (that.storeList && that.storeList.length > 0) {
					wx.getLocation({
						type: "gcj02",
						success(res) {
							that.storeList.forEach(item => {
								let distance = that.distance(
									res.latitude,
									res.longitude,
									item.latitude,
									item.longitude
								);
								item.distance = distance;
							});
							// 门店排序(距离：近->远)
							that.storeList.sort((a, b) => {
								return a.distance - b.distance;
							});
							that.isLocation = true;
							that.storeInfo = that.storeList[0] || {};
							that.selectIndex = 0;
						},
						fail(err) {
							console.log(err, "err");
							// if (type) {
								// wx.showModal({
								// 	title: "提示",
								// 	showCancel: false,
								// 	content: "微信不能确定你的位置，你可以通过以下操作提高微信的定位精确度：在位置设置中打开GPS和无线网络",
								// 	success: function(res) {}
								// });
							// }
							that.isLocation = false;
						}
					});
				// }
			},
			distance: function(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					);
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
			/* 获取授权 */
			openSetting() {
				let that = this;
				wx.getSetting({
					success: function(res) {
						var statu = res.authSetting;
						if (statu["scope.userLocation"] === false) {
							wx.openSetting({
								success: function(data) {
									if (data.authSetting["scope.userLocation"]) {
										wx.showToast({
											title: "授权成功",
											icon: "success",
											duration: 1000
										});
										that.getLocation("open");
									} else {
										wx.showToast({
											title: "授权失败",
											icon: "error",
											duration: 1000
										});
									}
								}
							});
						} else {
							// 获取用户位置信息
							that.getLocation("open");
						}
					}
				});
			}
		}
	};
</script>
<style scoped lang="less">
	.store_info_card {
		padding: 20rpx 30rpx;
		background-color: #fff;
		line-height: 48rpx;
	}

	.store_info_content {
		display: flex;
		justify-content: space-between;
	}

	.store_name {
		font-size: 30rpx;
		color: #333333;
	}

	.store_icon {
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.store_distance {
		font-size: 28rpx;
		color: #999999;
	}

	.store_auth {
		color: #333333;
		font-size: 28rpx;
		text-decoration-line: underline;
	}

	.popup_head {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}

	.popup_head_close {
		color: #719afa;
	}

	.store_list {
		padding: 0 30rpx;

		.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.store_item {
		box-shadow: 0 0 10rpx #999999;
		margin: 20rpx 10rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		line-height: 40rpx;
	}

	.store_item_active {
		border: 2rpx solid #ffa600;
		box-shadow: none;
		position: relative;
	}

	.store_icon_active {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 99;
	}

	.store_item_active::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 0;
		height: 0;
		border-top: 40rpx solid transparent;
		border-right: 40rpx solid #ffa600;
	}

	.store_item_title {
		font-weight: bold;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.store_item_left {
		flex: 1;
	}

	.store_item_right {
		color: #999999;
		text-align: center;
		width: 200rpx;
		border-left: 1rpx solid #d6d6d6;
		margin-left: 20rpx;
	}
</style>
